<!--A Design by W3layouts
Author: W3layout
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE HTML>
<html>
<head>
<title>Free Steam Website Template | Pricing :: w3layouts</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="web/css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Dosis' rel='stylesheet' type='text/css'>
<script src="web/js/jquery.min.js"></script>
<script type="text/javascript">
		jQuery(document).ready(function($) {
			$(".scroll").click(function(event){		
				event.preventDefault();
				$('html,body').animate({scrollTop:$(this.hash).offset().top},1200);
			});
		});
		</script>
</head>
<body>
 <div class="header-top">
	<div class="wrap">
        <div class="logo">
			<a href="index.html"><img src="web/images/logo.png" alt=""/></a>
		</div>
		<div class="cssmenu">
		  <nav id="nav" role="navigation">
			<a href="#nav" title="Show navigation">Show navigation</a>
			<a href="#" title="Hide navigation">Hide navigation</a>
			<ul class="clearfix">
				<li><a href="index.html">Home</a></li>
				<li><a href="start.html"><span>Get Started</span></a></li>
				<li class="active"><a href="work.html"><span>How it Works</span></a></li>
				<li><a href="pricing.html">Pricing</a></li>
				<li><a href="support.html">Support</a></li>
				<div class="clear"></div>
			</ul>
		    </nav>
		  </div>
		  <div class="buttons">
				<div class="login_btn">
					<a href="login.html">Login / Signup</a>
				</div>
				<div class="get_btn">
					<a href="start.html">Get Listed Today</a>
				</div>
				<div class="clear"></div>
		   </div>
	     <div class="clear"></div>
		<h2 class="head">Find the <span class="m_1">next event </span>You'll want <span class="m_1">to attend</span></h2>
     </div>
    </div>
    <div class="main">
     	<div class="wrap">
     		<h2 class="head1">Our Works</h2>
     		<p class="m_5">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
     		<section>
				<ul class="lb-album" >
					<li>
						<a href="#image-1">
							<img src="web/images/w1.jpg" alt="image01">
							<span>Pointe</span>
						</a>
						<div class="lb-overlay" id="image-1">
							<a href="#page" class="lb-close">x Close</a>
							<img src="web/images/w1.jpg" alt="image01">
							<div>
								<h3>pointe <span>/point/</span></h3>
								<p>Dance performed on the tips of the toes</p>
							</div>
						</div>
						<div class="m_desc1">
							<h4><a href="#">sed do eiusmod</a></h4>
							<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,.</p>
							<div class="get_btn1"><a href="">Read More</a></div>
					    </div>
					</li>
					<li>
						<a href="#image-2">
							<img src="web/images/w2.jpg" alt="image02">
							<span>Port de bras</span>
						</a>
						<div class="lb-overlay" id="image-2">
							<img src="web/images/w2.jpg" alt="image02">
							<div>							
								<h3>port de bras <span>/ˌpôr də ˈbrä/</span></h3>
								<p>An exercise designed to develop graceful movement and disposition of the arms</p>
							</div>
							<a href="#page" class="lb-close">x Close</a>
						</div>
						<div class="m_desc1">
							<h4><a href="#">sed do eiusmod</a></h4>
							<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,.</p>
							<div class="get_btn1"><a href="">Read More</a></div>
					    </div>
					</li>
					<li>
						<a href="#image-3">
							<img src="web/images/w3.jpg" alt="image03">
							<span>Plié</span>
						</a>
						<div class="lb-overlay" id="image-3">
							<img src="web/images/w3.jpg" alt="image03">
							<div>							
								<h3>pli·é <span>/plēˈā/</span></h3>
								<p>A movement in which a dancer bends the knees and straightens them again</p>
							</div>
							<a href="#page" class="lb-close">x Close</a>
						</div>
						<div class="m_desc1">
							<h4><a href="#">sed do eiusmod</a></h4>
							<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,.</p>
							<div class="get_btn1"><a href="">Read More</a></div>
					    </div>
					</li>
					<li>
						<a href="#image-4">
							<img src="web/images/w5.jpg" alt="image04">
							<span>Adagio</span>
						</a>
						<div class="lb-overlay" id="image-4">
							<img src="web/images/w5.jpg" alt="image04">
							<div>							
								<h3>a·da·gio <span>/əˈdäjō/</span></h3>
								<p>A movement or composition marked to be played adagio</p>
							</div>
							<a href="#page" class="lb-close">x Close</a>
						</div>
						<div class="m_desc1">
							<h4><a href="#">sed do eiusmod</a></h4>
							<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,.</p>
							<div class="get_btn1"><a href="">Read More</a></div>
					    </div>
					</li>
					<li>
						<a href="#image-5">
							<img src="web/images/w16.jpg" alt="image05">
							<span>Frappé</span>
						</a>
						<div class="lb-overlay" id="image-5">
							<img src="web/images/w16.jpg" alt="image05">
							<div>							
								<h3>frap·pé<span>/fraˈpā/</span></h3>
								<p>Involving a beating action of the toe of one foot against the ankle of the supporting leg</p>
							</div>
							<a href="#page" class="lb-close">x Close</a>
						</div>
						<div class="m_desc1">
							<h4><a href="#">sed do eiusmod</a></h4>
							<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,.</p>
							<div class="get_btn1"><a href="">Read More</a></div>
					    </div>
					</li>
					<li>
						<a href="#image-6">
							<img src="web/images/w7.jpg" alt="image06">
							<span>Glissade</span>
						</a>
						<div class="lb-overlay" id="image-6">
							<img src="web/images/w8.jpg" alt="image06">
							<div>							
								<h3>glis·sade <span>/gliˈsäd/</span></h3>
								<p>One leg is brushed outward from the body, which then takes the weight while the second leg is brushed in to meet it</p>
							</div>
							<a href="#page" class="lb-close">x Close</a>
						</div>
						<div class="m_desc1">
							<h4><a href="#">sed do eiusmod</a></h4>
							<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,.</p>
							<div class="get_btn1"><a href="">Read More</a></div>
					    </div>
					</li>
					<li>
						<a href="#image-7">
							<img src="web/images/w9.jpg" alt="image07">
							<span>Jeté</span>
						</a>
						<div class="lb-overlay" id="image-7">
							<img src="web/images/w10.jpg" alt="image07">
							<div>							
								<h3>je·té <span>/zhə-ˈtā/</span></h3>
								<p>A springing jump made from one foot to the other in any direction</p>
							</div>
							<a href="#page" class="lb-close">x Close</a>
						</div>
						<div class="m_desc1">
							<h4><a href="#">sed do eiusmod</a></h4>
							<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,.</p>
							<div class="get_btn1"><a href="">Read More</a></div>
					    </div>
					</li>
					<li>
						<a href="#image-8">
							<img src="web/images/w11.jpg" alt="image08">
							<span>Piqué</span>
						</a>
						<div class="lb-overlay" id="image-8">
							<img src="web/images/w11.jpg" alt="image08">
							<div>							
								<h3>pi·qué <span>/pēˈkā/</span></h3>
								<p>Strongly pointed toe of the lifted and extended leg sharply lowers to hit the floor then immediately rebounds upward</p>
							</div>
							<a href="#page" class="lb-close">x Close</a>
						</div>
						<div class="m_desc1">
							<h4><a href="#">sed do eiusmod</a></h4>
							<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,.</p>
							<div class="get_btn1"><a href="">Read More</a></div>
					    </div>
					</li>
					<li>
						<a href="#image-9">
							<img src="web/images/w12.jpg" alt="image09">
							<span>Piqué</span>
						</a>
						<div class="m_desc1">
							<h4><a href="#">sed do eiusmod</a></h4>
							<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,.</p>
							<div class="get_btn1"><a href="">Read More</a></div>
					    </div>
					</li>
					<li>
						<a href="#image-10">
							<img src="web/images/w13.jpg" alt="image10">
							<span>Piqué</span>
						</a>
						<div class="m_desc1">
							<h4><a href="#">sed do eiusmod</a></h4>
							<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,.</p>
							<div class="get_btn1"><a href="">Read More</a></div>
					    </div>
					</li>
					<li>
						<a href="#image-11">
							<img src="web/images/w17.jpg" alt="image11">
							<span>Piqué</span>
						</a>
						<div class="m_desc1">
							<h4><a href="#">sed do eiusmod</a></h4>
							<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,.</p>
							<div class="get_btn1"><a href="">Read More</a></div>
					    </div>
					</li>
					<li>
						<a href="#image-12">
							<img src="web/images/w15.jpg" alt="image12">
							<span>Piqué</span>
						</a>
						<div class="m_desc1">
							<h4><a href="#">sed do eiusmod</a></h4>
							<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,.</p>
							<div class="get_btn1"><a href="">Read More</a></div>
					    </div>
					</li>
				    <div class="clear"></div>
				</ul>
			</section>
     	</div>
     </div>
     <div class="footer">
     	<div class="wrap">
     	  <div class="footer-menu">
     		<ul>
				<li class="active"><a href="index.html">Home</a></li> 
				<li><a href="about.html">About eco</a></li> 
				<li><a href="work.html">How it works</a></li> 
				<li><a href="industries.html">Industries</a></li> 
				<li><a href="features.html">Features</a></li>
				<li><a href="pricing.html">Pricing</a></li>
				<li><a href="faq.html">Faq's</a></li>
				<li><a href="features.html">Privacy policy</a></li>
				<li><a href="blog.html">Blog</a></li>
				<li><a href="work.html">Terms of service</a></li>
				<div class="clear"></div>
			</ul>
     	  </div>
     	  <div class="footer-bottom">
     	  	<div class="copy">
			   <p>© 2014 Template by <a href="http://w3layouts.com" target="_blank"> w3layouts</a></p>
		    </div>
		    <div class="social">	
			   <ul>	
				  <li class="facebook"><a href="#"><span> </span></a></li>
				  <li class="twitter"><a href="#"><span> </span></a></li>
				  <li class="linked"><a href="#"><span> </span></a></li>	
				  <li class="arrow"><a href="#"><span> </span></a></li>	
				  <li class="dot"><a href="#"><span> </span></a></li>
				  <li class="rss"><a href="#"><span> </span></a></li>		
			   </ul>
		    </div>
		    <div class="clear"></div>
     	  </div>
       </div>
     </div>
</body>
</html>
